<!--
 * @Author: pmy
 * @Date: 2022-08-09 13:21:35
 * @LastEditTime: 2023-10-18 18:27:27
 * @LastEditors: pmy
 * @Description: In User Settings Edit
 * @FilePath: \bdcar-net\src\views\comlbs\messSend\currentTree.vue
-->
<template>
  <div v-loading="loading" style="height: calc(100% - 50px);position:relative">
    <el-input class="filter-input" placeholder="请输入关键字" v-model="filterText" prefix-icon="Search" clearable>
    </el-input>
    <div class="tree-body">
      <el-tree class="my-tree" v-if="showTree" :data='treeList' :default-expanded-keys="expandedkeys"
        :props="defaultProps" show-checkbox node-key="id" @check="handleCheck" :filter-node-method="filterNode"
        ref="myTree" :expand-on-click-node="false" :default-checked-keys="ids" :highlight-current="true">
        <template #default="{ node, data }">
          <span class="content">
            <div v-if="data.type != '2'" class="node-icon">
              <svg-icon :icon-class="getNodeImg(data)" />
            </div>
            <img v-else-if="data.type == '2' && data.state && (data.state.online || data.state.online == 0)"
              :src="getNodeImg2(data)" style="width:18px;top:3px" />
            <span v-if="data.type != '4' && data.type != '2'">
              {{ node.label }}
            </span>
            <span v-else> {{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script lang="ts">
import { useData } from "../../../api/tree"
import { ref, nextTick } from "vue"
export default {
  name: "currentTree",
  props: {
    treeList: Array,
  },
  setup() {
    const defaultProps = ref({
      children: 'children',
      label: 'label',
      isLeaf: 'hasChildren'
    });
    const ids = ref([]);
    const expandedkeys = ref(['100']);
    const {
      treeNodeImg,
      carState,
      myTree,
      showTree,
      loading,
      filterText,
      debounce
    } = useData();
    return {
      defaultProps,
      treeNodeImg, // 0:公司 1:部门 2:设备 3:人 4:通道
      carState,  // 0:行驶 1:停留 2:熄火 3:定位失败 4:离线 5:未定位 6:在线
      ids,
      showTree,
      loading,
      filterText,
      expandedkeys,
      myTree,
      debounce
    };
  },
  methods: {
    getNodeImg(data) {
      let imgHash = {
        0: "company",
        1: "department",
      }
      if (imgHash[data.type]) {
        return imgHash[data.type]
      }
    },
    getNodeImg2(data) {
      return new URL(`../../../assets/img/tree/${this.carState[data.state.online]}`, import.meta.url).href
    },
    filterNode(value, data, node) {
      //element-UI tree树形控件搜索过滤节点，不展示子节点的问题
      if (!value || value.length < 2) return true
      let parentNode = node.parent
      let labels = [node.label]
      let level = 1
      while (level < node.level) {
        labels = [...labels, parentNode.label]
        parentNode = parentNode.parent
        level++
      }

      return labels.some(label => label.indexOf(value) !== -1)
    },
    //模糊大小写
    compareOneEqualTwo(prototype, searchStr) {
      var reg = new RegExp(searchStr, "i");
      return (prototype.match(reg) != null);
    },
    getCheckedNodes() {
      return this.myTree.getCheckedNodes();
    },
    handleCheck(data, e) {
      //当前勾选的id集合
      let parent = this.$parent, _this = this;;
      let flag = true;
      function callback() {
        _this.ids = _this.getCheckedNodes();
      }
      _this.ids = e.checkedKeys

      do {
        if (parent.handleCheck) {
          parent.handleCheck(data, e, callback)
          flag = false;
        } else {
          parent = parent.$parent
        }
      } while (flag)
    },
  },
  watch: {
    filterText(val) {
      let _this = this;
      function myFun() {
        // 此处val是string
        if (!!!val) {
          _this.showTree = false
          nextTick(() => {
            _this.showTree = true
          })
        } else {
          _this.myTree.filter(val);
        }
      }
      _this.debounce(myFun);
    },
    treeList() {
      let _this = this;
      this.expandedkeys = this.treeList.map(v => {
        return v.id
      })
      nextTick(() => {
        _this.myTree.filter(_this.filterText);
      })
    }
  },
};
</script>
<style lang='scss' scoped>
.filter-input {
  margin: 10px 0;
  height: 32px;
}

.tree-body {
  height: calc(100% - 52px);
  width: 100%;
  overflow: auto;

  .my-tree {
    font-size: 14px;
    user-select: none;

    :deep(.el-tree-node) {
      min-width: -webkit-max-content;

      >.el-tree-node__children {
        overflow: visible;
      }
    }

    span {
      div {
        position: relative;
        top: 3px;
      }
    }
  }
}

.normal {
  position: absolute;
  right: 13px;
  top: 21px;
}
</style>